<template>
  <div>
    <Row>
      <Form ref="searchForm" :model="tuiguangSearchForm" inline :label-width="70" class="search-form">
        <Form-item label="手机号" prop="mobile">
          <Input type="text" v-model="tuiguangSearchForm.mobile" placeholder="请输入手机号" clearable style="width: 200px" />
        </Form-item>
        <Form-item label="下单时间">
          <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 300px"></DatePicker>
        </Form-item>
        <Button @click="getOrderData" type="primary" icon="ios-search" class="search-btn">搜索</Button>
        <Button class="search-btn" type="primary" @click="handleReset">重置</Button>
        <download-excel class="search-btn" :data="orderData" :fields="fields" :fetch="exportOrder" name="推广会员-支出.xls">
          <Button type="info" class="export"> 导出 </Button>
        </download-excel>
        <Button @click="unbindHandle" type="info" class="search-btn Unbind">解绑会员</Button>
      </Form>
    </Row>
    <div style="min-height: 180px">
      <Table :loading="loading" border ref="selection" :columns="tuiguangColumns" :data="orderData" class="mt_10" @on-selection-change="selectionChange">
      </Table>
      <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
        <Page :current="tuiguangSearchForm.pageNumber" :total="orderTotal" :page-size="tuiguangSearchForm.pageSize" @on-change="orderChangePage" @on-page-size-change="orderChangePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator show-sizer></Page>
      </Row>
    </div>
  </div>
</template>

<script>

import * as API_Member from "@/api/member.js"
import * as API_Order from "@/api/order.js"
import JsonExcel from "vue-json-excel"

export default {
  name: "tuiguang",
  components: {
    "download-excel": JsonExcel,
  },
  data () {
    return {// 收入表格的表头以及内容
      fields: {
        会员昵称: "nickName",
        手机号码: {
          field: "mobile",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        级别: "gradeName",
        区域: {
          field: "locationName",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        推广时间: "promoteDate",
        会员费累计额: {
          field: "rechargeMember",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        会员费分佣: "rechargeMemberCommission",
        消费焕贝总额: {
          field: "consumption",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        C端消费分佣: {
          field: "consumptionCommission",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        c充值钱包焕贝余额: {
          field: "rechargeMoney",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
      },
      id: "", //会员id
      loading: true, // 表单加载状态
      selectDate: null, // 选择时间段
      tuiguangColumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "会员昵称",
          key: "nickName",
          tooltip: true,
          width: "100",
        },
        {
          title: "手机号码",
          key: "mobile",
          tooltip: true,
          width: "120",
        },
        {
          title: "级别",
          key: "gradeName",
          width: "100",
        },
        {
          title: "区域",
          key: "locationName",
        },
        {
          title: "推广时间",
          key: "promoteDate",
        },
        {
          title: "会员费累计额",
          key: "rechargeMember"
        },
        {
          title: "会员费分佣",
          key: "rechargeMemberCommission",
        },
        {
          title: "消费焕贝总额",
          key: "consumption",
        },
        {
          title: "C端消费分佣",
          key: "consumptionCommission",
        },
        {
          title: "c充值钱包焕贝余额",
          key: "rechargeMoney",
        },
      ],
      orderData: [], //订单数据
      orderTotal: 0, //订单总条数
      //TA的订单form
      tuiguangSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        id: '',
        mobile: "",
        beginTime: "",
        endTime: "",
      },
      choseIds: [], //选中解绑的数据
    }
  },
  methods: {
    // 收入导出订单
    async exportOrder () {
      const params = JSON.parse(JSON.stringify(this.tuiguangSearchForm))
      params.pageNumber = 1
      params.pageSize = 999999999
      const result = await API_Order.getDisableMemberPageAll(params)
      if (result.code == 200) {
        if (result.result.records.length === 0) {
          this.$Message.warning("暂无可导出数据")
          return []
        } else {
          return result.result.records
        }
      } else {
        this.$Message.warning("导出数据失败，请重试")
      }
    },
    // 重置
    handleReset () {
      this.selectDate = ""
      this.tuiguangSearchForm = {
        // 请求参数
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        id: this.tuiguangSearchForm.id,
        mobile: "",
        beginTime: "",
        endTime: "",
      }
      this.getOrderData()
    },
    init () {
      //收入
      this.getOrderData()
    },
    // 解绑会员
    unbindHandle () {
      if (this.choseIds.length < 1) {
        this.$Message.warning("请选择要解绑的会员")
      } else {
        this.$Modal.confirm({
          title: "解绑会员",
          content: "<p>解除绑定关系的会员，将归属平台</p>",
          onOk: () => {
            API_Member.unBindingMemberList({ choseBindMemberIds: this.choseIds }).then((res) => {
              if (res.code == 200) {
                this.$Message.success("解绑成功")
                this.getOrderData()
              } else {
                this.$Message.error(res.message)
              }
            })
          },
        })
      }
    },
    // 收入起止时间从新赋值
    selectDateRange (v) {
      if (v) {
        this.tuiguangSearchForm.beginTime = v[0]
        this.tuiguangSearchForm.endTime = v[1]
      }
    },
    getOrderData () {
      this.loading = true
      API_Order.getDisableMemberPageAll(this.tuiguangSearchForm).then((res) => {
        this.loading = false
        if (res.success) {
          this.orderData = res.result.records
          this.orderTotal = res.result.total
        }
      })
      this.loading = false
    },
    //记录页数变化
    orderChangePage (v) {
      this.tuiguangSearchForm.pageNumber = v
      this.getOrderData()
    },
    //记录页数变化
    orderChangePageSize (v) {
      this.tuiguangSearchForm.pageNumber = 1
      this.tuiguangSearchForm.pageSize = v
      this.getOrderData()
    },
    // 推广会员多选，筛选出对应的id
    selectionChange (val) {
      this.choseIds = val.map((item) => item.id)
    },
  },

  mounted () {
    let userInfo = JSON.parse(this.getStore("userInfo"))
    this.tuiguangSearchForm.id = userInfo.memberId
    this.init()
  },
};
</script>
<style lang="scss" scoped>
// 建议引入通用样式 可删除下面样式代码
@import '@/styles/table-common.scss';
</style>
